<template>
    <div class="nav" v-if="toggle">
        <ul>
            <li v-for="(item,index) in list" :class="i === index ? 'active':''" :key="index">
                <div v-html="item.icon"></div>
                <div class="label">{{item.name}}</div>
                <dl>
                    <dt v-for="(child, childIndex) in item.children" @click="go(child.path, index, child.id)"
                        :key="childIndex">
                        <div v-html="child.icon"></div>
                        {{child.name}}
                    </dt>
                </dl>
            </li>
        </ul>
    </div>
</template>
<script>
    import {Base64} from 'js-base64'
    export default {
        name: 'menu',
        data(){
            return{
                list: [],
                toggle: true,
                i: 0,
            }
        },
        computed:{
            isToggle(){
                return this.$store.state.toggle
            },
            isMenus(){
                return this.$store.state.menus;
            }
        },
        watch: {
            isToggle(val){
                this.toggle = val;
            },
            isMenus(val){
                this.list = val;
            }
        },
        mounted(){
            if(this.list.length == 0){
                this.$store.dispatch('getMenus').then((res)=>{
                    this.list = res;
                })
            }
        },
        methods:{
            go(path, index, id){
                this.i = index;
                this.$router.push({path: path, query: Base64.encode(JSON.stringify({id: id}))})
            }
        }
    }
</script>
<style scoped lang="scss">
</style>
